@charset "utf-8";
//-----------------------------------------------------
// mixin scss
// 包括常用的mixin，%
// mixin，通过@include调用，样式通过拷贝的方式使用，尤其适用于传递参数
// %，通过@extend调用，样式通过组合申明的方式使用，适用于不传参数的代码片段
//-----------------------------------------------------
// @include float left & right
@mixin float($float: left) {
    float: $float;
    display: inline;
}
.float-left {
    @include float;
}
.float-right {
    @include float(right);
}

// @include clear
@mixin clear {
    *zoom: 1;
    &:before,
    &:after {
        content: "";
        display: table;
        height: 0;
    }
    &:after {
        clear: both;
    }
}
.clear {
    @include clear;
}
// @include opacity
@mixin opacity($opacity: 50) {
    opacity: $opacity / 100;
    filter: alpha(opacity=$opacity);
}

// @extend %text-overflow;
%text-overflow {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

//@include transition;
// @mixin transition($transition...) {
//     transition-property: $transition;
@mixin transition() {
    transition-duration: 0.3s;
}

// BEM
$elementSeparator: "__";
$modifierSeparator: "--";
@function containsModifier($selector) {
    $selector: selectorToString($selector);
    @if str-index($selector, $modifierSeparator) {
        @return true;
    } @else {
        @return false;
    }
}

@function selectorToString($selector) {
    $selector: inspect($selector); //cast to string
    $selector: str-slice($selector, 2, -2); //remove brackets
    @return $selector;
}

@function getBlock($selector) {
    $selector: selectorToString($selector);
    $modifierStart: str-index($selector, $modifierSeparator) - 1;
    @return str-slice($selector, 0, $modifierStart);
}

@mixin b($block) {
    .#{$block} {
        @content;
    }
}

@mixin e($element) {
    $selector: &;
    @if containsModifier($selector) {
        $block: getBlock($selector);
        @at-root {
            #{$selector} {
                #{$block + $elementSeparator + $element} {
                    @content;
                }
            }
        }
    } @else {
        @at-root {
            #{$selector + $elementSeparator + $element} {
                @content;
            }
        }
    }
}

@mixin m($modifier) {
    @at-root {
        #{&}#{$modifierSeparator + $modifier} {
            @content;
        }
    }
}

// 所有卡片通用样式
%card {
    @include float;
    @include transition;
    font-size: 14px;
    line-height: 25px;
    position: relative;
    border-radius: 2px;
    padding: 20px;
    margin: 0 12px 20px 8px;
    background-color: #fff;
    border-top: 4px solid #187fea;
    box-shadow: 2px 2px 8px rgba(0, 51, 140, 0.2);
    &:hover {
        z-index: 1;
        box-shadow: 2px 2px 8px rgba(0, 122, 255, 0.4);
    }
    .card-item {
        @extend %text-overflow;
    }
    .card-option {
        text-align: right;
        height: 30px;
    }
}

@mixin card($width) {
    @extend %card;
    width: ($width - 40) + px;
}
